<template>
    <view class="login_wrap">
        <view class="login_top"></view>
        <view class="login_container">
            <!-- <view class="user_avatar">
                <u-icon name="account-fill" color="#ffffff" size="68"></u-icon>
            </view> -->
            <view class="mes_text">您尚未登录，无法查看个人信息</view>

            <button @click=handleLogin class="login_btn">
                <text>登录</text>
            </button>
        </view>
    </view>
</template>
<script>
export default {
    data () {
        return {
            phoneCode: ""
        }
    },
    onLoad () {

    },
    methods: {
        //获取用户信息
        async getUserInfo () {
            const res = await this.$http.get('wxuser/userinfo')
            this.$store.commit('setUserInfo', res.Data)
            uni.setStorageSync("userInfo", res.Data)
        },
        //授权弹出
        handleLogin () {
            uni.getUserProfile({
                desc: '获取你的昵称、头像、地区及性别', // 必填，声明获取用户个人信息后的用途
                success: (res) => {
                    uni.showLoading({ title: "登录中..." })
                    this.userLogin(res.userInfo)
                },
                fail: (err) => {
                    console.log('用户信息获取失败', err);
                }
            });
        },
        //登录
        userLogin (userInfo) {
            uni.login({
                provider: 'weixin',
                success: async (e) => {
                    const res = await this.$http.get('pay/wxopenid', { code: e.code })
                    uni.setStorageSync("openid", res.Data.openid)
                    const res2 = await this.$http.post('wxuser/jwttoken', { openId: res.Data.openid, nickName: userInfo.nickName, headerImageUrl: userInfo.avatarUrl })
                    uni.setStorageSync("token", res2.Data.Token)
                    uni.showToast({ title: "登录成功" })
                    this.getUserInfo()
                    setTimeout(() => {
                        uni.navigateTo({ url: "/pages/index/index" })
                    }, 1000);
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.login_wrap {
    width: 100%;

    .login_top {
        width: 100%;
        height: 360rpx;
        background: linear-gradient(180deg, #F2F9FF 0%, #E1EFFF 100%);
    }

    .login_container {
        width: 100%;
        display: flex;
        background: #fff;
        flex-direction: column;
        align-items: center;
        border-radius: 36rpx 36rpx 0 0;
        margin-top: -36rpx;

        .user_avatar {
            width: 160rpx;
            height: 160rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #e9e9e9;
            border-radius: 50%;
            margin-top: -76rpx;
        }

        .mes_text {
            font-weight: bold;
            font-size: 32rpx;
            padding-top: 80rpx;
        }

        .login_btn {
            width: 220rpx;
            height: 68rpx;
            margin-top: 38rpx;
            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
            border-radius: 12rpx;
            color: #fff;
            line-height: 68rpx;
            text-align: center;
        }
    }
}
</style>